<template>
  <div class="Menumg">
    <section class="toolTop">
      <el-form :inline="true" class="demo-form-inline">
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item class="addBtn">
              <el-button icon="el-icon-plus" @click="handleDialog = true">新 增 菜 单</el-button>
              <el-button icon="el-icon-sort-down" @click="handleOrder = true">菜 单 排 序</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </section>
    <section class="mainSec">
      <el-tree
        :data="menuData"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :render-content="renderContent"
      ></el-tree>
    </section>
    <section class="dialogSec" v-bind:class="{'dialogshow':handleDialog}">
      <el-form size="mini" label-position="right" :model="secData">
        <section class="title">
          <h3>栏目设置</h3>
          <i class="el-icon-close" @click="handleDialog = false"></i>
        </section>
        <div class="wrap">
          <section class="top">
            <el-form-item label="名称" :label-width="formLabelWidth">
              <el-input v-model="secData.mName" clearable placeholder="菜单名/功能名"></el-input>
            </el-form-item>
            <!-- 类型 -->
            <el-form-item label="类型" :label-width="formLabelWidth">
              <el-select v-model="secData.type" clearable placeholder="请选择">
                <el-option
                  v-for="item in typeData"
                  :key="item.type"
                  :label="item.name"
                  :value="item.type"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 分级 -->
            <el-form-item label="分级" :label-width="formLabelWidth">
              <el-select v-model="secData.level" clearable placeholder="请选择">
                <el-option
                  v-for="item in levelData"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 所属页面 -->
            <el-form-item label="所属页面" :label-width="formLabelWidth" v-bind:hidden="belongPage">
              <el-select v-model="secData.pId" clearable placeholder="请选择">
                <el-option
                  v-for="item in pageData"
                  :key="item.mId"
                  :label="item.mName"
                  :value="item.mId"
                ></el-option>
              </el-select>
            </el-form-item>
            <!--添加图片路径-->
            <el-form-item label="图标路径" :label-width="formLabelWidth">
              <el-input v-model="secData.icon" clearable placeholder="请输入图标路径"></el-input>
            </el-form-item>
            <!-- 菜单展示 -->
            <el-form-item label="菜单展示" :label-width="formLabelWidth">
              <el-radio v-model="secData.show" label="0">否</el-radio>
              <el-radio v-model="secData.show" label="1">是</el-radio>
            </el-form-item>
            <!-- 访问路径 -->
            <el-form-item label="访问路径" :label-width="formLabelWidth">
              <el-input v-model="secData.action" clearable placeholder="访问路径"></el-input>
            </el-form-item>
          </section>
        </div>
        <section class="foot">
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="handleDialog = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="createMenu">确 定</el-button>
          </div>
        </section>
      </el-form>
    </section>
    <section class="dialogSec" v-bind:class="{'dialogshow': handleModify}">
      <el-form size="mini" ref="modifyData" :model="modifyData" label-position="right">
        <section class="title">
          <h3>栏目修改</h3>
          <i class="el-icon-close" @click="handleModify = false"></i>
        </section>
        <div class="wrap">
          <section class="top">
            <el-form-item v-show="true" label="序号" :label-width="formLabelWidth">
              <el-input v-model="modifyData.indexse" disabled placeholder="序号"></el-input>
            </el-form-item>
            <el-form-item v-show="false" label="ID" :label-width="formLabelWidth">
              <el-input v-model="modifyData.mId" disabled placeholder="ID"></el-input>
            </el-form-item>
            <el-form-item label="名称" :label-width="formLabelWidth">
              <el-input v-model="modifyData.mName" clearable placeholder="菜单名/功能名"></el-input>
            </el-form-item>
            <!-- 类型 -->
            <el-form-item label="类型" :label-width="formLabelWidth">
              <el-input v-model="modifyData.type" disabled placeholder="类型"></el-input>
            </el-form-item>
            <!-- 分级 -->
            <el-form-item label="分级" :label-width="formLabelWidth">
              <el-input v-model="modifyData.level" disabled placeholder="分级"></el-input>
            </el-form-item>
            <!--添加图片路径-->
            <el-form-item label="图标路径" :label-width="formLabelWidth" v-show="iconShow">
              <el-input v-model="modifyData.icon" clearable placeholder="请输入图标路径"></el-input>
            </el-form-item>
            <!-- 菜单展示 -->
            <el-form-item label="菜单展示" :label-width="formLabelWidth">
              <el-radio v-model="modifyData.show" label="0">否</el-radio>
              <el-radio v-model="modifyData.show" label="1">是</el-radio>
            </el-form-item>
            <!-- 访问路径 -->
            <el-form-item label="访问路径" :label-width="formLabelWidth">
              <el-input v-model="modifyData.action" clearable placeholder="访问路径"></el-input>
            </el-form-item>
          </section>
        </div>
        <section class="foot">
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="handleModify = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="modifyMenu">确 定</el-button>
          </div>
        </section>
      </el-form>
    </section>
    <section class="dialogSec" v-bind:class="{'dialogshow':handleOrder}">
      <el-form size="mini" ref="modifyData" :model="modifyData" label-position="right">
        <section class="title">
          <h3>栏目排序</h3>
          <i class="el-icon-close" @click="handleOrder = false"></i>
        </section>
        <div class="wrap">
          <section class="main">
            <el-transfer
              v-model="menuOrderNew"
              :props="{
                  key: 'mid',
                  label: 'mName'
                }"
              :data="menuOrderOld"
              target-order="push"
              :titles="['原排序', '新排序']"
            ></el-transfer>
          </section>
        </div>
        <section class="foot">
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="handleOrder = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="orderChange">确 定 排 序</el-button>
          </div>
        </section>
      </el-form>
    </section>
  </div>
</template>

<script type="text/javascript" src="../../../api/sysmg/systemconfig/menumg.js"></script>

<style lang="scss">
.Menumg {
  flex: 1;
  > section {
    &.toolTop {
      height: auto !important;
      padding-bottom: 5px;
      > .el-form {
        border-radius: 5px;
        padding: 8px 16px;
        .el-form-item {
          margin-bottom: 0;
          .el-button {
            background-color: #161836;
            font-size: 14px;
            padding: 8px 16px;
            color: #85899c;
            border: 1px solid #85899c;
          }
          .el-button:hover,
          .el-button:focus {
            background-color: #161836;
            font-size: 14px;
            padding: 8px 16px;
            color: #fff;
            border: 1px solid #fff;
          }
        }
      }
    }
    &.mainSec {
      border-radius: 5px;
      padding: 15px;
      //background-color: #fff;
      margin-bottom: 16px;
    }

    &.dialogSec {
      .el-form {
        .wrap {
          section {
            &.main {
              display: flex;
              justify-content: center;
              .el-transfer {
                display: inline-block;
                .el-transfer-panel {
                  border: none;
                  .el-transfer-panel__header {
                    background-color: #1f2548;
                    border-bottom: 1px solid #85899c;
                    .el-checkbox .el-checkbox__label {
                      color: #85899c;
                    }
                  }
                  .el-transfer-panel__body {
                    background-color: #1f2548;
                    .el-transfer-panel__item.el-checkbox {
                      color: #85899c;
                    }
                    .el-transfer-panel__item.el-checkbox.is-checked {
                      .el-checkbox__input.is-checked + .el-checkbox__label {
                        color: #ffffff;
                      }
                    }
                  }
                  .el-transfer__buttons {
                    .el-transfer__button.is-disabled,
                    .el-transfer__button.is-disabled:hover {
                      border: 1px solid #85899c;
                      background-color: #85899c;
                      color: #ffffff;
                    }
                  }
                }
                .el-transfer-panel__list {
                  padding: 6px 1px;
                  .el-checkbox {
                    margin-right: 67px;
                  }
                }
              }
            }
          }
        }
        .foot {
          .el-button--default {
            background-color: #161836;
            font-size: 14px;
            padding: 8px 16px;
            color: #85899c;
            border: 1px solid #85899c;
          }
          .el-button--default:hover,
          .el-button--default:focus {
            background-color: #161836;
            font-size: 14px;
            padding: 8px 16px;
            color: #fff;
            border: 1px solid #fff;
          }
          .el-button--primary {
            padding: 8px 16px;
            font-size: 14px;
            background-color: #44abf5;
            border: 1px solid #44abf5;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
